<template>
  <!-- 大盒子 -->
  <div id="box">
    <!-- header头部 -->
    <!-- <div class="header">
      <div class="header-title">
          <van-nav-bar
            :title="title"
            left-text=""
            left-arrow
            @click-left="onClickLeft"
            @click-right="onClickRight"
          />
      </div>
      <div class="header-line"></div>
    </div> -->
    <!-- login登录 -->
    <div class="login-box">
      <van-form validate-first>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          v-model="value1"
          name="pattern"
          placeholder="用户名/手机号/邮箱"
        />
        <!-- 通过 pattern 进行函数校验 -->
        <van-field
          v-model="value2"
          name="pattern"
          placeholder="请输入密码"
          type="password"
          @input="pwdRegFn"
        />
        <!-- :rules="[{ trigger: 'onChange', pattern: pwdReg, message: '' }]" -->
        <!-- 错误提示 -->
        <p
          class="error-tips"
          v-show="pwdFlag"
        >
          请输入六位密码，至少一个大写字母，小写字母，数字
        </p>
        <div class="login-btn">
          <div>
            <van-button
              round
              block
              type="info"
              :disabled="isDisabled"
              @click="loginFn"
              >登录</van-button
            >
          </div>
        </div>
      </van-form>
      <!-- 切换 -->
      <div class="login-toggle">
        <span @click="loginCodeFn">账号密码登录</span>
        <span @click="phoneRegFn">手机快速注册</span>
      </div>
      <!-- 提示其他登录方式 -->
      <div class="tips">
        <van-divider>其他的登录方式</van-divider>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/users';
import { Dialog, Toast } from 'vant';
export default {
  data() {
    return {
      title: '嗨购登录',
      pwdReg: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,10}$/,
      isDisabled: false,
      value1: '',
      value2: '',
      pwdFlag: false,
    };
  },
  methods: {
    pwdRegFn() {
      this.pwdFlag = !this.pwdReg.test(this.value2);
      if (this.value2 == '') {
        this.pwdFlag = false;
      }
    },
    // 点击账号密码登录 ==> 手机验证码登录 (loginCode)
    loginCodeFn() {
      this.$router.push('/loginCode');
    },
    // 点击手机快速注册 ==> 手机快速注册 (reg)
    phoneRegFn() {
      this.$router.push('/reg');
    },
    async loginFn() {
      const res = await login({
        loginname: this.value1,
        password: this.value2,
      });
      console.log(res.data);
      if (res.data.code == 10010) {
        Dialog.confirm({
          message: '该用户还未注册，是否立即注册',
          confirmButtonText: '立即注册',
          cancelButtonColor: '#999',
        })
          .then(() => {
            this.$router.push('/reg');
          })
          .catch(() => {
            // on cancel
          });
      } else if (res.data.code == 10011) {
        Toast('密码错误');
      } else if (res.data.code == 200) {
        localStorage.setItem('token', res.data.data.token);
        localStorage.setItem('username', this.value1);
        localStorage.setItem('userid', res.userid);
        Toast('登录成功');
        this.$router.push('/loginSu');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#box {
  margin-top: 80px;
}
.header-line {
  width: 100%;
  height: 26px;
  background: #ff6666;
}
.login-box {
  margin-top: 30px;
  padding: 0 16px;
  box-sizing: border-box;
  .error-tips {
    font-size: 12px;
    color: #ff6666;
  }
  .login-btn {
    margin-top: 30px;
    .van-button--info {
      margin: 16px 0;
      background: #ff6666;
      border: 1px solid #ff6666;
    }
  }
}
.login-toggle {
  display: flex;
  padding: 0 2px;
  box-sizing: border-box;
  justify-content: space-between;
  span {
    display: block;
    font-size: 12px;
  }
}
.tips {
  margin-top: 80px;
}
</style>
